<template>
  <div class="password">
    <div class="xian"></div>
    <el-tabs type="border-card">
      <el-tab-pane label="原密码修改">
        <div class="password_modify">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="116px" class="demo-ruleForm">
            <el-form-item label="账户名" class="namedis">
              <el-input value="186698562" disabled=""></el-input>
            </el-form-item>
            <el-form-item label="请输入原始密码">
              <el-input></el-input>
            </el-form-item>
            <el-form-item label="请输入新密码"  prop="pass">
              <el-input type="password" v-model="ruleForm.pass" autocomplete="off">
                <span slot="append">同时包含数字与字符，密码必须长度为8-16位</span>
              </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="checkPass">
              <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="success" @click="onSubmit">确 认</el-button>
              <el-button class="danger">取 消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="手机验证码修改">
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="116px" class="demo-ruleForm">
          <el-form-item label="账户名"  class="namedis">
            <el-input placeholder="186698562"></el-input>
          </el-form-item>
          <el-form-item label="手机验证码">
            <el-input class="yanzh">
              <!-- <el-button slot="append" class="iponeS" id="iponeS" @click="settme"><img src="static/images/ipone_03.png" alt="">发送验证码</el-button> -->
            </el-input>
            <span class="iponeS" v-show="show" @click="getCode"><img src="static/images/ipone_03.png" alt="">发送验证码</span>
            <span class="iponeS count" v-show="!show" >{{count}} s</span>
          </el-form-item>
          <el-form-item label="请输入新密码"  prop="pass2">
            <el-input type="password" v-model="ruleForm2.pass2" autocomplete="off">
            </el-input>
            <span  slot="append">同时包含数字与字符，密码必须长度为8-16位</span>
          </el-form-item>
          <el-form-item label="确认新密码" prop="checkPass2">
            <el-input type="password" v-model="ruleForm2.checkPass2" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="success" @click="onSubmit">确 认</el-button>
            <el-button class="danger">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="showSuccess" class="successTip">
      <img src="static/images/sucsere.png">
      <div class="tipText">修改成功</div>
      <div class="tipText2">请重新登录</div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
     var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
     var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validate2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass2 !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
     var validate3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass2) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      ruleForm:{
        pass: '',
        checkPass: ''
      },
      ruleForm2:{
        pass2: '',
        checkPass2: ''
      },
      showSuccess:false,
      show: true,
      count: '',
      timer: null,
      rules:{
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
      },
      rules2:{
          pass2: [
            { validator: validate2, trigger: 'blur' }
          ],
          checkPass2: [
            { validator: validate3, trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
    onSubmit() {
      this.showSuccess = true
    },
    getCode(){
     const TIME_COUNT = 60;
     if (!this.timer) {
       this.count = TIME_COUNT;
       this.show = false;
       this.timer = setInterval(() => {
       if (this.count > 0 && this.count <= TIME_COUNT) {
         this.count--;
        } else {
         this.show = true;
         clearInterval(this.timer);
         this.timer = null;
        }
       }, 1000)
      }
   }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.namedis .el-input.is-disabled .el-input__inner {
  background-color: #fff;
  border: none;
} 
.el-tabs--border-card > .el-tabs__header .el-tabs__item:hover:not(.is-disabled){ color: #ff8b00;}
.password {
  background: #fff;
  border-radius: 8px;
  .el-tabs--border-card {
    width: 90%;
    margin: 0 auto;
    border: none;
    box-shadow: none;
    & > .el-tabs__header {
      background-color: #fff;
      margin: 30px 0;
      #tab-0 {
        border: none;
        margin: 0;
        &:hover,
        &:focus,
        &:active {
          border: none;
        }
        &.is-active {
          border-bottom: 2px solid #ff8b00;
        }
      }
      .el-tabs__item {
        font-size: 18px;
        height: 50px;
        margin: 0;
        color: #000;
        border: none;
        &.is-active {
          color: #ff8b00;
          background-color: none;
          border: none;
          border-bottom: 2px solid #ff8b00;
        }
      }
    }
    .el-tabs__content {
      .el-form-item {
        .el-form-item__content .el-input {
          width: 320px;
        }
        .iponeS {
          background: #ff8b00;
          color: #fff;
          font-size: 16px;
          margin-left: 20px;
          padding:  0;
          display: inline-block;
          text-align: center;
          position: relative;
          border-radius: 4px;
          width: 140px;
          cursor: pointer;
          img {
            position: relative;
            top: 3px;
            margin-right: 9px;
          }
        }
        .count{
          background: #ccc;
          cursor: default;
        }
        .el-input-group__append {
          position: absolute;
          top: 0;
          left: 100%;
          width: 100%;
          background: none;
          border: none;
          height: 40px;
          line-height: 40px;
        }
        button {
          padding: 12px 42px;
          &.success {
            background: #ff8b00;
            color: #fff;
            border: 1px solid #ff8b00;
          }
          &.danger {
            border: 1px solid #ff8b00;
            color: #ff8b00;
            background: none;
          }
        }
      }
    }
  }
  .xian {
    height: 15px;
    background: rgb(255, 139, 0);
    border-radius: 15px;
    margin-bottom: 15px;
  }
}
.successTip .el-dialog{ width: 90%; max-width: 368px; text-align: center;}
.successTip .el-dialog__body img{ margin: 0 auto 15px;}
.tipText{ font-size: 24px; color: #67c23a; line-height: 200%;}
.tipText2{ color: #b5b5b5; font-size: 16px;}
@media screen and (max-width: 900px) {
  .password
    .el-tabs--border-card
    .el-tabs__content
    .el-form-item
    .el-input-group__append {
    top: 40px;
    left: 0;
    padding: 0;
  }
  .password .el-form-item:nth-child(3) {
    margin-bottom: 42px;
  }
  .password .yanzh {
    margin-bottom: 30px;
  }
  .password .yanzh .el-input-group__append {
    top: 50px !important;
  }
}
@media screen and (max-width: 768px) {
  .password
    .el-tabs--border-card
    .el-tabs__content
    .el-form-item
    .el-form-item__content
    .el-input {
    width: 100%;
  }
}
@media screen and (max-width: 460px) {
  .password .el-form-item__label {
    width: 100% !important;
    text-align: left;
  }
  .password .el-form-item__content {
    margin-left: 0 !important;
  }
  .password .el-tabs--border-card .el-tabs__content .el-form-item .iponeS {
    margin-left: 0;
  }
  .password .el-input-group--append .el-input__inner,
  .password .el-input-group__prepend {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
</style>
